<template>
	<view :class="['vh100',{'dark':theme == 'dark'}]">
		<view class="flex flexend between plr15 ptb10 w100 bdb_1e fixed lf0 bgPart zdx100">
			<view class="flex flexend">
				<view :class="['ft14 gray7',{'ft18 white':current==0}]" @click="change(0)">{{$t('trade.all_delegate')}}</view>
			    <view :class="['pl10 ft14 gray7',{'ft18 white':current==1}]" @click="change(1)">{{$t('trade.his_delegate')}}</view>
			</view>
			<view class="flex alcenter ml10 ft14" v-show="current==0">
				<text class="gray7" @click="togglePopup('bottom-entrust')" data-position="bottom">{{enType=='in' ? $t('trade.buy') : $t('trade.sell')}}</text>
				<image src="/static/image/pull.png" class="h10 wt10 ml5"></image>
			</view>
		</view>
		<uni-popup :show="popType === 'bottom-entrust'" position="bottom" @hidePopup="togglePopup('')">
			<view class="bottom-content">
				<view class="bottom-content-box tc gray7">
				    <view :class="['bdb_1e ptb10 ft14 bgPart',{'blueColor':enType=='in'}]" @click="changeEntrustType('in')">{{$t('trade.buy')}}</view>
					<view :class="['ptb10 ft14 bgPart',{'blueColor':enType=='out'}]" @click="changeEntrustType('out')">{{$t('trade.sell')}}</view>
		            <view class="pt5 pb10">
		            	<view class="ptb10 ft14 bgPart" @click="togglePopup('')">{{$t('trade.cancel')}}</view>
		            </view>
				</view>
			</view>
		</uni-popup>
		<view class="en-ul pl15 pt50" v-show="current==0">
			<view class="ptb10 bdb_1e pr15" v-for="(item,index) in enList" :key="item.id">
				<view class="flex between alcenter">
					<view class="flex flex flexend">
						<text :class="['ft14 redColor',{'greenColor':item.matchType=='BUY'}]">{{item.matchType=='BUY'? $t('trade.buy') : $t('trade.sell')}}</text>
						<text class="nWhite pl5 ft14">{{item.symbols}}</text>
					</view>
					<view class="blueColor bgBlack radius2 plr20 ptb5" @click="revoke(index,item.matchId)">{{$t('trade.back')}}</view>
				</view>
				<view class="mt15 flex">
					<view class="flex1">
						<text class="gray4">{{$t('trade.price')}}({{item.symbols.split('/')[1]}})</text>
						<view class="mt5">{{item.unit |toFixed5}}</view>
					</view>
					<view class="flex1 tc">
						<text class="gray4">{{$t('trade.num')}}({{item.symbols.split('/')[0]}})</text>
						<view class="mt5">{{item.willNumberB |toFixed5}}</view>
					</view>
					<view class="flex1 tr">
						<text class="gray4">{{$t('trade.time')}}</text>
						<view class="mt5">{{item.createTime }}</view>
					</view>
				</view>
			</view>
			<view class="tc ptb30" v-if='enList.length==0'>
				<image src="/static/image/nodata.png" class="h50 wt50"></image>
				<view class="gray7">{{$t('home.norecord')}}</view>
			</view>
			<view class="tc gray7 ptb20" v-show="isBottom">{{$t('home.loading')}}...</view>
			<view class="tc gray7 ptb20" v-show="!hasMore && enList.length>10">{{$t('home.nomore')}}</view>
		</view>
		<view class="en-ul pl15 pt50" v-show="current==1">
			<view class="ptb10 bdb_1e pr15" v-for="item in hisList" :key="item.id">
				<view class="flex between alcenter">
					<view class="flex flex flexend">
						<!-- <text :class="['ft14 redColor',{'greenColor':item.way==1}]" v-if="item.from_user_id==uid">{{item.way==1?$t('trade.buy') : $t('trade.sell')}}</text> -->
						<text :class="['ft14 redColor',{'greenColor':item.matchType=='BUY'}]">{{item.matchType=='BUY'? $t('trade.buy') : $t('trade.sell')}}</text>
						<text class="nWhite pl5 ft14">{{item.symbols}}</text>
						<text class="pl5 gray7">{{item.createTime}}</text>
					</view>
					<view class="gray7 ptb5">{{typeArr[item.status]}}</view>
				</view>
				<view class="mt15 flex">
					<view class="flex1">
						<text class="gray4">{{$t('trade.price')}}({{item.symbols.split('/')[1]}})</text>
						<view class="mt5">{{item.unit |toFixed5}}</view>
					</view>
					<view class="flex1 tc">
						<text class="gray4">{{$t('trade.num')}}({{item.symbols.split('/')[0]}})</text>
						<view class="mt5">{{item.willNumberB |toFixed5}}</view>
					</view>
					<view class="flex1 tr">
						<text class="gray4">{{$t('trade.fee')}}</text>
						<view class="mt5">{{item.numberFee |toFixed5}}</view>
					</view>
				</view>
			</view>
			<view class="tc ptb30" v-if='hisList.length==0'>
				<image src="/static/image/nodata.png" class="h50 wt50"></image>
				<view class="gray7">{{$t('home.norecord')}}</view>
			</view>
			<view class="tc gray7 ptb20" v-show="isBottom">{{$t('home.loading')}}...</view>
			<view class="tc gray7 ptb20" v-show="!hasMore && hisList.length>10">{{$t('home.nomore')}}</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapActions,mapGetters} from 'vuex';
	import uniPopup from '@/components/uni-popup2.vue';
	import {currencyRecord,cancelCurrency} from '../../common/apiString.js'
    import {myMixins} from '@/common/myMixins.js'
    export default{
    	mixins:[myMixins],
		components: {
			uniPopup
		},
		data() {
			return {
				uid:'',
				current:0,//全部/历史
				popType:'',//底部弹窗
				enType:'in',//全部委托类型
				enList:[],//当前委托
				hisList:[],//历史委托
				typeArr:{
					PAID:this.$t('bico.W475'),
					PART_MATCH:this.$t('bico.W476'),
					CANCEL:this.$t('bico.W461'),
					FINISH:this.$t('bico.W477'),
					CANCEL_FINISH:this.$t('bico.W478'),
				},
				page:1,
				isBottom:false,
				hasMore:true,
			}
		},
		filters:{
			toFixed5: function (value) {
				value = Number(value);
				return value.toFixed(5);
			},
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('bico.W479'),
			})

		},
		onShow(){
			this.$utils.setTheme(this.theme);
			this.uid = uni.getStorageSync('uid');
			this.entrustList();
		},
		methods: {
			change(current){
				if(this.current==current){
					return;
				}
				this.current = current;
				this.page = 1;
				current==0 ? this.entrustList() : this.hisenList();
			},
			togglePopup(popType){//弹窗
				this.popType = popType;
			},
			changeEntrustType(type){//委托类型切换
			    this.enType = type;
				this.togglePopup('');
				this.page=1;
				this.bottom=false,
				this.hasMore=true,
				this.enList=[];
				this.entrustList();
			},
			entrustList(){//委托
				let that = this;
				let url = currencyRecord;
				var type;
				that.enType == 'out' ? type='SELL' : type='BUY'
				that.$utils.initDataToken({ url: currencyRecord,data:
				{type:1,
				size:1000,
				//symbols:this.symbol.split("/")[0],
				current:that.page},type:'get' }, res => {
					console.log('data', res)
					var data  = (res.records).filter(function(element){
						return element.matchType == type
					});
					uni.stopPullDownRefresh();
					that.isBottom=false;
					that.enList = (that.page == 1) ? data : that.enList.concat(data);
					that.hasMore = (res.total == data.length) ? true : false;
				});
			},
			hisenList(){//历史委托
				let that = this;
				that.$utils.initDataToken({ url: currencyRecord,data:{type:5,size:1000,current:that.page},type:'get' }, res => {
					var data = res.records;
					uni.stopPullDownRefresh();
					that.isBottom=false;
					that.hisList = (that.page == 1) ? data : that.hisList.concat(data);
					that.hasMore = (res.limit == data.length) ? true : false;
					console.log(that.hasMore)
					console.log(that.hisList)
				});
			},
			onPullDownRefresh(){
				this.page=1;
				this.bottom=false,
				this.hasMore=true,
				this.currentrent==0 ? this.entrustList() : this.hisenList();
			},
			onReachBottom() {
				if(!this.hasMore) return;
				this.page++;
				this.currentrent==0 ? this.entrustList() : this.hisenList();
			},
			revoke(index,id){//撤单
				let that = this;
				that.$utils.initDataToken({ url: cancelCurrency,data:{matchId:id},type:'post' }, res => {
					that.$utils.showLayer(this.$t('bico.W474'),);
					that.enList.splice(index, 1);//动态删掉这个订单
				});
			}
		},
	}
</script>

<style lang="scss">
	page{
		background: #FFFFFF;
	}
	.wt50 {
	    width: 35px;
	    height: 40px;
	}
</style>
